<!-- TextWidget.vue -->
<template>
    <WidgetContainer :widget-id="config.id">
        <el-text @click="onClick" :style="{ width: config.attributes.width?config.attributes.width: '100%',fontSize: config.attributes.textFontSize, color: config.attributes.basicType?'':config.attributes.textColor }" :type="config.attributes.basicType" :size="config.attributes.size" :truncated="config.attributes.truncated"
            :line-clamp="config.attributes.lineClamp" :class="config.attributes?.cssClass">
            {{ config.attributes.text }}
        </el-text>
    </WidgetContainer>
</template>

<script setup>
import { inject } from 'vue'
import { ElText } from 'element-plus';

import { executeEventHandler } from '@/utils/eventExecutor'

const formData = inject('formData')
const widgetList = inject('widgetList')

const props = defineProps({
    config: {
        type: Object,
        required: true,
    },
});

const onClick = () => {
    executeEventHandler(props.config.events?.onClick, { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value })
}
</script>